<template>
  <div class="detail">
    <myheader :title="title"></myheader>
    <span class="backprev" @click="backprev">&lt;</span>
    <div class="content">
      <div class="c-top">
        <div class="c-top-left">
          <img src="" alt="" />
        </div>
        <div class="c-top-right">
          <p>{{ $route.query.obj.nickname }}</p>
          <span>0</span>
          <span>{{ $route.query.obj.address }}</span>
          <span>{{ $route.query.obj.ctime }}</span>
        </div>
      </div>
      <p>{{ $route.query.obj.question }}</p>
      <div class="c-bot">
        <span @click="backprev">返回首页</span>
        <span>收藏</span>
        <span>分享</span>
      </div>
      <p>共{{ reportlist.length }}条回复</p>
    </div>
    <div class="pinglun">
      <p v-show="reportlist.length == 0">没有更多了~</p>
      <div class="p-content">
        <ul>
          <li v-for="(item, i) in reportlist" :key="i">{{ item }}</li>
        </ul>
      </div>
      <div class="bot">
        <input
          type="text"
          v-model="value"
          placeholder="我也说一句..."
          @keydown.enter="reportmsg"
        />
      </div>
    </div>
  </div>
</template>

<script>
import myheader from "@/components/myheader";

export default {
  components: { myheader },
  data() {
    return {
      title: "发帖详情",
      value: "",
      reportlist: [],
    };
  },
  created() {
    this.reportlist = JSON.parse(localStorage.getItem("rplist")) || [];
  },
  methods: {
    backprev() {
      this.$router.go(-1);
    },
    reportmsg() {
      this.reportlist.push(this.value);
      localStorage.setItem("rplist", JSON.stringify(this.reportlist));
      this.value = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  .backprev {
    position: absolute;
    top: 15px;
    left: 10px;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
  }
  .content {
    width: 100%;
    height: 180px;
    background-color: #fff;
    padding-bottom: 10px;
    .c-top {
      padding: 10px 20px;
      display: flex;
      .c-top-left {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #ccc;
      }
      .c-top-right {
        p {
          padding: 10px;
        }
        span {
          padding-left: 20px;
        }
      }
    }
    p {
      text-align: left;
      padding-left: 20px;
    }
    .c-bot {
      width: 100%;
      height: 50px;
      padding: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        display: inline-block;
        padding: 4px 0;
        width: 30%;
        border: 1px solid gainsboro;
        border-radius: 5px;
      }
    }
  }
  .pinglun {
    width: 100%;
    height: calc(100% - 242px);
    background-color: #fff;
    position: relative;
    margin-top: 10px;
    .p-content {
      width: 100%;
      height: calc(100% - 50px);
      overflow-y: scroll;
      ul {
        width: 100%;
        li {
          width: 100%;
          background-color: rgb(208, 240, 250);
          padding: 5px 10px;
          text-align: left;
          margin: 5px 0;
        }
      }
    }
    .bot {
      width: 100%;
      height: 50px;
      position: absolute;
      bottom: 0;
      input {
        width: 90%;
        height: 90%;
        box-shadow: 1px 1px 5px 1px gainsboro;
        outline: 0;
        border: 1px solid #ccc;
        text-indent: 1em;
        font-size: 18px;
      }
    }
  }
}
</style>